<template>
  <view>
    <u-sticky>
      <u-cell-group>
        <u-cell :customStyle="{ background: '#EEE' }" @click="handleSelectGroup" icon="grid-fill" title="默认分组" value="切换分组" isLink> </u-cell>
      </u-cell-group>
    </u-sticky>
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="item in formList" :key="item.id">
        <view v-if="current == item.id" class="row-btns-wrap">
          <u-button :dataName="item.id" text="分享" icon="weixin-fill" open-type="share" :customStyle="iconStyle" type="warning" slot="right-icon" size="small"> </u-button>
          <u-button text="编辑" icon="edit-pen-fill" @click="navToFormDesign(item.id)" :customStyle="iconStyle" type="success" slot="right-icon" size="small"> </u-button>
          <u-button text="查看" icon="eye-fill" @click="navToForm(item.id)" type="primary" slot="right-icon" size="small"> </u-button>
        </view>
        <u-cell :customStyle="{ background: current == item.id ? '#FEFEFE' : '' }" @click="handleItemClick" :name="item.id" size="mini" :title="item.title" :label="item.label"></u-cell>
      </u-list-item>
    </u-list>
    <view class="floot-btn">
      <u-button @click="handleCreate" :customStyle="cStyle" type="primary" text="创建活动" shape="circle"></u-button>
    </view>
    <u-popup :show="showPopup" mode="top">
      <view class="popup-title">创建活动</view>
      <view style="padding: 4px 12px">
        <u--form labelPosition="left" :model="modelOfNewForm" :rules="rules" ref="uForm">
          <u-form-item label="活动名称" prop="title" placeholder="请输入活动的名称" borderBottom ref="item1" labelWidth="70">
            <u--input v-model="modelOfNewForm.title" border="none"></u--input>
          </u-form-item>
          <u-form-item label="活动说明" borderBottom ref="item2" labelWidth="70">
            <u--input v-model="modelOfNewForm.label" border="none"></u--input>
          </u-form-item>
          <u-form-item @click="showCalendar = true" label="结束时间" borderBottom ref="item3" labelWidth="70">
            {{ modelOfNewForm.endtime }} <u-icon slot="right" name="arrow-right"></u-icon>
            <u-calendar @close="showCalendar = false" :show="showCalendar" @confirm="handleCalendarConfirm"></u-calendar>
          </u-form-item>
        </u--form>
        <view style="display: flex; margin-top: 10px">
          <u-button @click="showPopup = false" :customStyle="btnStyleTwo" type="error" text="取消返回" shape="circle" size="small"></u-button>
          <u-button @click="handleConfirmClick" :customStyle="btnStyleTwo" type="primary" text="保存提交" shape="circle" size="small"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
// import { exp1 } from './exempleSchema'
const { v4: uuidv4 } = require('uuid')
export default {
  name: 'Admin',
  data() {
    return {
      showCalendar: false,
      showPopup: false,
      current: '',
      iconStyle: {
        marginRight: '4px',
      },
      formList: [],
      btnStyleTwo: {
        width: '40%',
      },
      cStyle: {
        width: '80%',
      },
      modelOfNewForm: {
        title: '',
        label: '',
        endtime: '',
        total: 999,
      },

      rules: {
        title: {
          type: 'string',
          required: true,
          message: '请填写活动名称',
          trigger: ['blur', 'change'],
        },
      },
    }
  },
  mounted() {
    // console.log('uuid', uuidv4())
    this.getList()
  },
  onShareAppMessage(e) {
    const id = e.target.dataset.name
    const t = this.formList.find((e) => e.id == id)
    // console.log('##onShareAppMessage', JSON.parse(t.schema).bgurl)
    return {
      title: t.title, // 默认为小程序名称
      path: `/pages/autoform/showForm/index?id=${id}`, // 默认为当前页面路径
      imageUrl: JSON.parse(t.schema).bgurl, // 默认为当前页面的截图
    }
  },
  methods: {
    handleCreate() {
      this.modelOfNewForm = {
        title: '',
        label: '',
        endtime: '',
        total: 999,
      }
      this.showPopup = true
    },
    handleItemClick(e) {
      this.current = e.name
      console.log('handleItemClick', e)
    },

    async getList() {
      const res = await uni.$u.http.post(`/weixinNotify/AutoForm/GetFormList`, { script: 'select * from formlist' })
      this.formList = res
      // console.log(res)
    },
    async handleSelectGroup() {
      console.log('call handleSelectGroup')
      const res = await uni.$u.http.post(`/weixinNotify/SmsExp?methodName=sendSMS&phoneNum=18627472125&tempid=SMS_464510938&vcode=1245`)
    },

    navToForm(id) {
      // console.log(id)
      uni.$u.route(`/pages/autoform/showForm/index?id=${id}`)
    },

    navToFormDesign(id) {
      // console.log(id)
      uni.$u.route(`/pages/autoform/designForm/index?id=${id}`)
    },
    handleCalendarConfirm(e) {
      this.modelOfNewForm.endtime = e[0]
      this.showCalendar = false
    },

    async handleConfirmClick() {
      try {
        const r = await this.$refs.uForm.validate()
        console.log('after handleConfirmClick', r)
        await this.submit({ ...this.modelOfNewForm })
        this.showPopup = false
      } catch (e) {
        console.log(e)
      }
    },

    async submit({ title, label = '', endtime = '', total = 100 }) {
      const newSchema = {
        formid: uuidv4(),
        title,
        label,
        bgurl: 'https://www.lanpiankeji.com/weixinNotify/images/autoform/yy_form_bg.png',
        description: '活动说明',
        endtime,
        total,
        ismodify: true,
        components: [
          {
            id: '001',
            type: 'textInput',
            model: 'name',
            labelWidth: '70',
            label: '字段1',
            defaultval: '',
            placeholder: '请输入字段1',
            ruletype: 'withoutNum',
          },
        ],
      }
      const { formid } = newSchema
      const _script = `insert into formlist ([group],[id],[label],[schema],[title]) values ('默认','${formid}','${label}','${JSON.stringify(newSchema)}','${title}');`
      const r = await uni.$u.http.post(`/weixinNotify/AutoForm/AddItem`, { script: _script })
      await this.getList()
      // uni.$u.route('/pages/autoform/formManage/index')
    },
  },
}
</script>
<style>
.floot-btn {
  position: fixed;
  bottom: 25px;
  left: 0;
  width: 100%;
}

.row-btns-wrap {
  position: absolute;
  /* top: 4px; */
  right: 10px;
  display: flex;
  align-items: center;
}
.popup-title {
  padding: 10px 0;
  text-align: center;
  background: #eee;
}
</style>
